<template>
    <div>
        <el-dialog title="查看" :close-on-click-modal="false"  width="60%" :visible.sync="dataVisible" v-el-drag-dialog>
            <el-row :span="24">
                <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()">
                    <el-col :span="24">
                        <el-form-item label="物料名称" :label-width="formLabelWidth" prop="classId" class="pop">
                            <el-popover ref="treeListPopover" placement="bottom-start" width="auto" trigger="click"
                                v-model="visible" style="width: 100%;" disabled>
                                <template #reference>
                                    <el-input v-model="dataForm.className" @blur="visible = true" :readonly="true"
                                        placeholder="" class="menu-list__input" clearable disabled></el-input>
                                </template>
                                <el-tree :data="treeList" :props="treeListTreeProps" node-key="classId" ref="treeListTree"
                                    @current-change="treeListTreeCurrentChangeHandle" :default-expand-all="true"
                                    :highlight-current="true" :expand-on-click-node="false">
                                </el-tree>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物料编码：" :label-width="formLabelWidth" prop="pinNum">
                            <el-input v-model.trim="dataForm.pinNum" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="物料名称：" :label-width="formLabelWidth" prop="name">
                            <el-input v-model.trim="dataForm.name" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="型号规格：" :label-width="formLabelWidth" prop="partNumber">
                            <el-input v-model.trim="dataForm.partNumber" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物料等级：" :label-width="formLabelWidth" prop="class1">
                            <el-input v-model.trim="dataForm.class1" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生产厂家：" :label-width="formLabelWidth" prop="manufacture">
                            <el-input v-model.trim="dataForm.manufacture" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生产厂家型号(或代码):" :label-width="formLabelWidth" prop="manufacturerModelNumber"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.manufacturerModelNumber" placeholder="生产厂家型号(或代码)" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作温度：" :label-width="formLabelWidth" prop="optTemp">
                            <el-input v-model.trim="dataForm.optTemp" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作电压：" :label-width="formLabelWidth" prop="optVoltage">
                            <el-input v-model.trim="dataForm.optVoltage" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="封装信息：" :label-width="formLabelWidth" prop="encapsulatedInformation">
                            <el-input v-model.trim="dataForm.encapsulatedInformation" placeholder=""
                                disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="参数属性：" :label-width="formLabelWidth" prop="paramrAttribute">
                            <el-input v-model.trim="dataForm.paramrAttribute" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    
                    <!-- <el-col :span="12">
                        <el-form-item label="类型说明：" :label-width="formLabelWidth" prop="partType">
                            <el-input v-model.trim="dataForm.partType" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="管脚数：" :label-width="formLabelWidth" prop="pinCount">
                            <el-input v-model.trim="dataForm.pinCount" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    
                    
                    
                    
                    <!-- <el-col :span="24">
                        <el-form-item label="规格书:" :label-width="formLabelWidth" prop="datasheetName" class="applicaWord">
                            
                            <uploadFile @uploadFile="fileListFun" :fileLists="fileList"></uploadFile>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="PCB封装:" :label-width="formLabelWidth" prop="datasheetName" class="applicaWord">
                           
                            <uploadFile @uploadFile="fileList2Fun" :fileLists="fileList2"></uploadFile>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="元件符号:" :label-width="formLabelWidth" prop="datasheetName" class="applicaWord">
                            
                            <uploadFile @uploadFile="fileList3Fun" :fileLists="fileList3"></uploadFile>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="规格书：" :label-width="formLabelWidth" prop="datasheetName"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.datasheetName" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="PCB封装：" :label-width="formLabelWidth" prop="pcbFootprint"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.pcbFootprint" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="元件符号：" :label-width="formLabelWidth" prop="schematicPart"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.schematicPart" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="pspice_model：" :label-width="formLabelWidth" prop="pspiceModel"
                            v-if="dataForm.type != '3'">
                            <el-input v-model.trim="dataForm.pspiceModel" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件上传:" :label-width="formLabelWidth" class="applicaWord">
                            <uploadFile @uploadFile="fileListFun" :fileLists="fileList" num="1"></uploadFile>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注:" :label-width="formLabelWidth" prop="remark">
                            <el-input type="textarea" v-model="dataForm.remark" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    
                </el-form>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button size="small" @click="dataVisible = false">取 消</el-button>
                    <!-- <el-button size="small" type="primary" @click="dataFormSubmit()" :disabled="isDisabled">保存</el-button> -->
                </span>
            </template>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisibleImg">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
  
<script>
import { treeClassTranslate } from "../../../utils/treeDataTranslate.js";
import uploadFile from './uploadLook.vue';
export default {
    emits: ["refreshDataList"],
    components: {
        uploadFile
    },
    data() {
        return {
            urlUpdate: '',//文件上传路径
            token: {
                token: ''
            },
            isDisabled: false,
            dataVisible: false,
            dialogVisibleImg: false,
            disabled: false,
            dialogImageUrl: '',
            dataForm: {
                class1: '',//物料等级
                classId: "",//目录id
                className: "",//目录名称
                datasheet: '',//规格书路径
                datasheetName: "",//规格书名称
                // description: '',//物料描述
                encapsulatedInformation: '',//封装信息
                footPath: '',//封装路径
                // footRef: '',//封装名称
                libPath: '',//库路径
                // libRef: '',//库文件名
                manufacture: '',//生产厂家
                manufacturerModelNumber:'',//生产厂家型号（或代码）
                name: '',//物料名称

                objectFlowDetailId: '',//
                objectFlowId: '',//
                objectId: '',//

                optTemp: '',//工作温度
                optVoltage: '',//工作电压
                paramrAttribute: '',//参数属性
                partNumber: '',//型号规格
                // partType: '',//类型说明
                pcbFootprint: '',//PCB封装
                pictureurl: '',//预览图片路径
                pinCount: '',//管脚数
                pinNum: '',//品号
                prctureName: '',//图片名称
                pspiceModel: '',//
                remark: '',//备注
                schematicPart: '',//元件符号
                type: '1',//1新增2修改3删除
                // value: '',//值
            },
            dataRule: {
                // name: [
                //     {
                //         required: true,
                //         message: "名称不能为空",
                //         trigger: "blur",
                //     },
                // ],
                // parentId: [
                //     {
                //         required: true,
                //         message: "请选择上级项目",
                //         trigger: "blur",
                //     },
                // ],
            },
            //目录
            treeList: [],
            treeListTreeProps: {
                children: "list",
                label: "className",
            },
            formLabelWidth: "160px",
            visible: false,
            fileList: [],//规格书
            fileList2: [],//封装
            fileList3: [],//库
            fileList4: [],//图片
            index: null,
            url: process.env.VUE_APP_BASE_API,
        };
    },
    created() {
        this.urlUpdate = process.env.VUE_APP_BASE_API + '/file/uploadFileInterface'
        this.token.token = sessionStorage.getItem("token");
    },
    methods: {
        async init(row) {
            this.dataVisible = true
            //获取上级菜单
            await this.Sevice({
                url: "/ad/class/nav",
                method: "get",
            }).then((res) => {
                if (res.code != 200) {
                } else {
                    // this.treeList = treeClassTranslate(res.treeList, 'classId');
                    this.treeList = res.list
                }
            }).catch((error) => {
                console.log(error);
            });

            this.$nextTick(async() => {
                this.$refs["dataForm"].resetFields();
                this.fileList = []//规格书
                this.fileList2 = []//封装
                this.fileList3 = []//库
                this.fileList4 = []//图片
                this.dataForm.classId = ''
                this.dataForm.className = ''
            
            if (!row) {
                
            } else {
                await this.Sevice({
                    url: "/ad/object/info/"+row.objectId,
                    method: "get",
                }).then((res) => {
                    if (res.code != 200) {
                    } else {
                        this.dataForm = JSON.parse(JSON.stringify(res.info))
                        // if (this.dataForm.datasheet) {
                        //     let datasheet = this.dataForm.datasheet.split(',')
                        //     let datasheetName = this.dataForm.datasheetName.split(',')
                        //     let list = []
                        //     for (let i = 0; i < datasheet.length; i++) {
                        //         list.push({ url: datasheet[i], name: datasheetName[i] })
                        //     }
                        //     this.fileList = list
                        // }
                        // if (this.dataForm.footPath) {
                        //     let footPath = this.dataForm.footPath.split(',')
                        //     let pcbFootprint = this.dataForm.pcbFootprint.split(',')
                        //     let list = []
                        //     for (let i = 0; i < footPath.length; i++) {
                        //         list.push({ url: footPath[i], name: pcbFootprint[i] })
                        //     }
                        //     this.fileList2 = list
                        // }
                        // if (this.dataForm.libPath) {
                        //     let libPath = this.dataForm.libPath.split(',')
                        //     let schematicPart = this.dataForm.schematicPart.split(',')
                        //     let list = []
                        //     for (let i = 0; i < libPath.length; i++) {
                        //         list.push({ url: libPath[i], name: schematicPart[i] })
                        //     }
                        //     this.fileList3 = list
                        // }
                        // if (this.dataForm.pictureurl) {
                        //     let pictureurl = this.dataForm.pictureurl.split(',')
                        //     let prctureName = this.dataForm.prctureName.split(',')
                        //     let list = []
                        //     for (let i = 0; i < pictureurl.length; i++) {
                        //         list.push({ url: pictureurl[i], name: prctureName[i] })
                        //     }
                        //     this.fileList4 = list
                        // }
                        if (this.dataForm.filePaths) {
                            let filePaths = this.dataForm.filePaths.split(',')
                            let fileNames = this.dataForm.fileNames.split(',')
                            let list = []
                            for (let i = 0; i < filePaths.length; i++) {
                                list.push({ url: filePaths[i], name: fileNames[i] })
                            }
                            this.fileList = list
                        }
                    }
                }).catch((error) => {
                    console.log(error);
                });
                
            }
        });
        },
        // 菜单树选中
        treeListTreeCurrentChangeHandle(data, node) {
            this.dataForm.classId = data.classId
            this.dataForm.className = data.className
            this.visible = false
        },
        // 菜单树设置当前选中节点
        treeListTreeSetCurrentNode() {
            this.$refs.treeListTree.setCurrentKey(this.dataForm.classId)
            this.dataForm.className = (this.$refs.treeListTree.getCurrentNode() || {})['className']
        },
        //上传文件
        fileListFun(data) {
            this.fileList = data;
            console.log('1', data)
        },
        fileList2Fun(data) {
            this.fileList2 = data;
            console.log('2', data)
        },
        fileList3Fun(data) {
            this.fileList3 = data;
            console.log('3', data)
        },
        fileList4Fun(data) {
            this.fileList4 = data;
            console.log('4', data)
        },
        handleRemoveImg(file) {
            console.log(file, this.fileList4);
            for (let i = 0; i < this.fileList4.length; i++) {
                if (this.fileList4[i].uid == file.uid) {
                    this.fileList4.splice(i, 1);
                }
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = this.url+file.url;
            this.dialogVisibleImg = true;
        },
        handleDownloadImg(file) {
            this.fileDown(file);
        },
        //附件上传成功回调
        handleSuccess(response, file, fileList) {
            console.log(response, file, fileList)
            if (response.code == 200) {
                this.fileList4 = fileList
            } else {
                for (let i = 0; i < fileList.length; i++) {
                    if (fileList[i].uid == file.uid) {
                        fileList.splice(i, 1);
                    }
                }
                this.$message({ message: response.msg, type: 'error', duration: 1000 })
            }
        },
        //上传文件
        handleChange(file, fileList) {
            this.fileList4 = fileList;

        },
        // 表单提交
        async dataFormSubmit() {
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    //规格书
                    let datasheet = []
                    let datasheetName = []
                    if (this.fileList.length) {
                        for (let i = 0; i < this.fileList.length; i++) {
                            if (this.fileList[i].response) {
                                datasheet.push(this.fileList[i].response.map.filePath)
                            } else {
                                datasheet.push(this.fileList[i].url)
                            }
                            datasheetName.push(this.fileList[i].name)
                        }
                    }
                    this.dataForm.datasheet = datasheet.toString()
                    this.dataForm.datasheetName = datasheetName.toString()

                    //封装
                    let footPath = []
                    let footRef = []
                    if (this.fileList2.length) {
                        for (let i = 0; i < this.fileList2.length; i++) {
                            if (this.fileList2[i].response) {
                                footPath.push(this.fileList2[i].response.map.filePath)
                            } else {
                                footPath.push(this.fileList2[i].url)
                            }
                            footRef.push(this.fileList2[i].name)
                        }
                    }
                    this.dataForm.footPath = footPath.toString()
                    this.dataForm.footRef = footRef.toString()

                    //库
                    let libPath = []
                    let libRef = []
                    if (this.fileList3.length) {
                        for (let i = 0; i < this.fileList3.length; i++) {
                            if (this.fileList3[i].response) {
                                libPath.push(this.fileList3[i].response.map.filePath)
                            } else {
                                libPath.push(this.fileList3[i].url)
                            }
                            libRef.push(this.fileList3[i].name)
                        }
                    }
                    this.dataForm.libPath = libPath.toString()
                    this.dataForm.libRef = libRef.toString()

                    //图片
                    let pictureurl = []
                    let prctureName = []
                    if (this.fileList4.length) {
                        for (let i = 0; i < this.fileList4.length; i++) {
                            if (this.fileList4[i].response) {
                                pictureurl.push(this.fileList4[i].response.map.filePath)
                            } else {
                                pictureurl.push(this.fileList4[i].url)
                            }
                            prctureName.push(this.fileList4[i].name)
                        }
                    }
                    this.dataForm.pictureurl = pictureurl.toString()
                    this.dataForm.prctureName = prctureName.toString()
                    let data = { index: this.index, data: this.dataForm }
                    this.$emit('dataForm', data)
                    this.dataVisible = false
                }
            });
        },
    },
};
</script>
  
<style scoped>
.mod-menu .menu-list__input>.el-input__inner,
.mod-menu .icon-list__input>.el-input__inner {
    cursor: pointer;
}

.mod-menu__icon-popover {
    width: 458px;
    overflow: hidden;
}

.mod-menu__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
}

.mod-menu__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
}

.mod-menu__icon-list>.el-button {
    padding: 8px;
    margin: 8px 0 0 8px;
}

.mod-menu__icon-list>.el-button>span {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.mod-menu .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
}

.el-tree {
    height: 200px;
    overflow-y: auto;
}
/deep/ .el-upload.el-upload--picture-card{
    display: none;
  }
</style>
  